<template>
	<div>       
        <ButtonGroup>
            <Button type="ghost" @click="changeType(1)" :class="{active:formValidate.type === 1}">上传分类</Button>
            <Button type="ghost" @click="changeType(2)" :class="{active:formValidate.type === 2}">新闻分类</Button>
        </ButtonGroup>
        <Tree :data="baseData" @on-select-change="onSelectChange"></Tree>
        <ButtonGroup>
            <Button type="ghost" @click="addRootNode">添加根节点</Button>
            <Button type="ghost" @click="addChildNode">添加子节点</Button><br>
            <Button type="ghost" @click="editNode">修改</Button>
            <Button type="ghost" @click="removeNode">删除</Button>
        </ButtonGroup>
        <Modal
            v-model="modal2"
            title="树形菜单"
            @on-ok="ok"
            @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate">
                <FormItem prop="title">
                    <Input v-model="formValidate.title" placeholder="请输入..."></Input>
                </FormItem>
            </Form>
        </Modal>
	</div>	
</template>

<script>
    //import Base from '../../common/Base.js'
	export default {
        //mixins:[Base],
        data () {
            return {
                modal2: false,
                baseData: [],
                formValidate:{
                    type:1,
                    title:'',
                    parentId:null
                },
                nodeId:null,
                list:[]
                
                              
                //selectColumns:null
            }
        },
        methods:{
            onSelectChange(selection){                
                this.formValidate.parentId = selection[0]._id;
                this.nodeId = selection[0]._id;
            },
            addRootNode(){
                this.modal2 = true;
                this.formValidate.parentId = null;
                this.nodeId = null;
            },
            addChildNode(){
                this.modal2 = true;
                this.nodeId = null;
            },
            editNode(){
                this.$http({
                    method:'GET',
                    url:`http://localhost:3000/cate/data/`+this.nodeId
                }).then((response)=>{
                    this.formValidate = response.data;
                });
                this.modal2 = true;
            },
            removeNode(){
                this.$http({
                    method:'delete',
                    url:`http://localhost:3000/cate/data/`+this.nodeId
                }).then((response)=>{
                    //parent.location.reload();
                    this.getTree(this.formValidate.type);
                });
            },
            ok () {
                var url = null;
                if(this.nodeId){
                    url = `http://localhost:3000/cate/data/`+this.nodeId;
                }else{
                    delete this.formValidate._id;
                    url = `http://localhost:3000/cate/data`
                }
                this.$http({
                    method:'post',
                    url:url,
                    data:this.formValidate
                }).then((response)=>{
                    //parent.location.reload();
                    this.getTree(this.formValidate.type);
                })
            },
            cancel () {
                this.$Message.info('点击了取消');
            },
            changeType(type){
                this.formValidate.type = type;
                //this.selectColumns = this.columns2;
                this.getTree(type);
            },
            getTree(type){
                //this.type = type;
                //this.type = 1;
                this.$http({
                    method:'GET',
                    url:'http://localhost:3000/cate/list/'+type,
                    data:this.formValidate
                }).then((response) => {             
                    this.baseData = response.data;
                })
            }
        },
        created(){
        	this.getTree(1);
        }
    }
</script>

<style scoped>
	.active{background-color:#f60;color:#fff;}
</style>